<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<div class="iconpSpan" style="float: left">
				<i class="el-icon-link"></i>
				<span>附件</span>
			</div>
			<div class="btns" style="float: right">
				<el-button type="primary" @click="addText" size="small">
					新增附件
					<i class="el-icon-plus"></i>
				</el-button>
				<el-button style="margin-left: 3px;" type="primary" size="small">
					删除附件
					<i class="el-icon-delete"></i>
				</el-button>
			</div>
		</div>
		<div class="text item">
			<el-table border style="width: 100%">
				<el-table-column type="selection" align="center"></el-table-column>
				<el-table-column fixed prop="date" label="日期" align="center">
					<template>
						<input type="text" />
					</template>
				</el-table-column>
				<el-table-column prop="name" label="姓名" align="center"></el-table-column>
				<el-table-column prop="province" label="省份" align="center"></el-table-column>
				<el-table-column prop="city" label="市区" align="center"></el-table-column>
				<el-table-column prop="address" label="地址" align="center"></el-table-column>
				<el-table-column prop="zip" label="邮编" align="center"></el-table-column>
				<el-table-column fixed="right" label="操作" align="center">
					<!-- <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template> -->
				</el-table-column>
			</el-table>
			<!-- 提示框 -->
			<el-dialog title="附件上传" :visible.sync="delVisible" width="600px" center>
				<div class="del-dialog-cnt">
					<textarea name="" id="" cols="30" rows="10" style="width: 400px; height: 80px"></textarea>
					<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
						<div class="el-upload__text">选择文件上传</div>
						<i class="el-icon-upload"></i>
						<!-- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
					</el-upload>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="delVisible = false">取 消</el-button>
					<el-button type="primary">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</el-card>
</template>
<script>
import { Dialog, Table, TableColumn, Pagination, Upload} from 'element-ui';
export default {
  name: 'accessory',
	components: {
	 'el-dialog': Dialog, //对话框
	 'el-table': Table, //表格
	 'el-table-column': TableColumn, //表格列
	 'el-pagination': Pagination, //分页
	 'el-upload':Upload
	},
  data () {
    return {
      delVisible: false
    }
  },
  methods: {
    addText () {
      this.delVisible = true
    }
  }
}
</script>
<style lang="scss">
.del-dialog-cnt {
	display: flex;
}
.el-upload-dragger {
	width: 150px;
	height: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 0;
	background: #409eff;
	border-radius: 2px;
	margin-left: 5px;
}
.el-upload-dragger .el-icon-upload {
	font-size: 20px;
	margin: 0;
}
.el-upload-dragger .el-upload__text {
	color: #ffffff;
}
.el-dialog--center {
	text-align: left;
}
.el-dialog--center .el-dialog__footer {
	text-align: center;
}
.el-table {
	th {
		padding: 6px 0;
	}
	td {
		padding: 6px 0;
	}
}
</style>
